﻿<!DOCTYPE html>
<html ng-app>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" name="viewport" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @RenderSection("style", false)
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="mainContainer">
        <header>
            <div class="menuButton icon-reorder"></div>
        </header>
        <div class="container">
            @RenderBody()
        </div>
        <footer>Copy Right @@ SohoTiger</footer>
    </div>
    <menu class="mainMenu">
        <menuitem>AAAAA</menuitem>
        <menuitem>
            AAAAA
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
        </menuitem>
        <menuitem>AAAAA</menuitem>
        <menuitem>AAAAA</menuitem>
        <menuitem>AAAAA</menuitem>
        <menuitem>
            AAAAA
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
        </menuitem>
        <menuitem>
            AAAAA
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
        </menuitem>
    </menu>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/angular");
    <script type="text/javascript">
        (function () {
            var items = $('.mainMenu > menuitem');
            for (var i = 0, l = items.length; i < l; i++) {
                var transition = 'margin-left 0.4s ease-in-out ' + (0.4 / (l - 1) * i) + 's, color 0.1s linear, background-color 0.2s linear';
                items.eq(i).css('transition', transition);
            }
            function hideMenu(event) {
                if (event && event.target && $('.mainMenu')[0].contains(event.target)) return;
                $('.mainMenu').removeClass('mainMenuShow').find('.subMenuShow').removeClass('subMenuShow');
                $('.mainContainer').removeClass('mainContainerHide');
                document.removeEventListener('mousedown', hideMenu, true);
                document.removeEventListener('touchstart', hideMenu, true);
                setTimeout(function () { $('.menuButton').bind('click', showMenu); }, 400); //wait until the animation finished
                event.stopPropagation();
                event.cancelBubble = true; //for IE10 metro
            }
            function showMenu() {
                $('.mainMenu').addClass('mainMenuShow');
                $('.mainContainer').addClass('mainContainerHide');
                document.addEventListener('mousedown', hideMenu, true);
                document.addEventListener('touchstart', hideMenu, true);
                $('.menuButton').unbind('click', showMenu);
            }
            $('.menuButton').bind('click', showMenu);

            $('.mainMenu').on('click', '> menuItem', function () {
                $('.mainMenu .subMenuShow').removeClass('subMenuShow');
                $(this).addClass('subMenuShow');
            });

            var container = $('.container');
            var initScrollTop = container.scrollTop();
            var hasMaxSized = false;
            container.bind('scroll', function () {
                var nowScrollTop = container.scrollTop();
                if (nowScrollTop - initScrollTop > 0) {
                    if ((!hasMaxSized) && nowScrollTop > 72) {
                        $('.mainContainer').addClass('maxSizeContainer');
                        hasMaxSized = true;
                    }
                } else if(hasMaxSized && (container[0].scrollHeight - nowScrollTop - container.height() > 72) && (nowScrollTop - initScrollTop < 0)) {
                    $('.mainContainer').removeClass('maxSizeContainer');
                    hasMaxSized = false;
                }
                initScrollTop = nowScrollTop;
            });
        })();
    </script>
    @RenderSection("scripts", false)
</body>
</html>
